'use client'

import { useEffect, useState } from "react"

import ChatInput from "@/components/ai/chat/chat-input"
import ChatTopbar from "@/components/ai/chat/chat-topbar"
import ChatSidebar from "@/components/ai/chat/chat-sidebar"
import ChatListArea from "@/components/ai/chat/chat-list-area"
import {
    ResizableHandle,
    ResizablePanel,
    ResizablePanelGroup
} from "@/components/ui/resizable"

import { cn } from "@/lib/utils"
import { avatars } from '@/mock/avatars'
import { useAvatar } from "@/hooks/use-avatar"

type ChatContainerProps = {
    defaultCollapsed?: boolean
    navCollapsedSize: number
}

const ChatContainer = ({ defaultCollapsed = false, navCollapsedSize }: ChatContainerProps) => {
    const [isCollapsed, setIsCollapsed] = useState<boolean>(false)
    const [isMobile, setIsMobile] = useState<boolean>(false)

    const currentAvatar = useAvatar(state => state.avatar)

    useEffect(() => {
        const checkScreenWidth = () => {
            setIsMobile(window.innerWidth <= 768)
        }
        checkScreenWidth()
        window.addEventListener('resize', checkScreenWidth)
        return () => window.removeEventListener('resize', checkScreenWidth)
    }, [])

    return (
        <div className="z-10 border rounded-lg w-full h-full text-sm lg:flex">
            <ResizablePanelGroup
                direction="horizontal"
                onLayout={(sizes: number[]) => {
                    document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`
                }}
                className="h-full items-stretch"
            >
                <ResizablePanel
                    defaultSize={25}
                    collapsedSize={navCollapsedSize}
                    collapsible={true}
                    minSize={isMobile ? 0 : 24}
                    maxSize={isMobile ? 8 : 30}
                    onCollapse={() => {
                        setIsCollapsed(true)
                        document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(true)}`
                    }}
                    onExpand={() => {
                        setIsCollapsed(false)
                        document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(false)}`
                    }}
                    className={cn(isCollapsed && 'min-w-[50px] md:min-w-[70px] transition-all duration-300 ease-in-out')}
                >
                    <ChatSidebar
                        isCollapsed={isCollapsed || isMobile}
                        links={avatars.map(avatar => ({
                            name: avatar.name,
                            messages: [{ id: Date.now().toString(), content: `${avatar.name} is here to serve you`, role: 'assistant' }],
                            avatar: avatar.headImage,
                            variant: avatar.name === currentAvatar.name ? 'grey' : 'ghost'
                        }))}
                    />
                </ResizablePanel>
                <ResizableHandle withHandle />
                <ResizablePanel defaultSize={75} minSize={30}>
                    <div className="flex flex-col justify-between w-full h-full">
                        <ChatTopbar />
                        <div className="w-full overflow-y-auto overflow-x-hidden h-full flex flex-col">
                            <ChatListArea />
                            <ChatInput />
                        </div>
                    </div>
                </ResizablePanel>
            </ResizablePanelGroup>
        </div>
    )
}

export default ChatContainer